<script>
  import sheep from '@/sheep';
  import dayjs from 'dayjs';

  export default {
    name: 'historyToday',
    data() {
      return {
        historyToday: [],
      };
    },
    props: {
      pageHeight: {
        type: String,
        default: '0px',
      },
    },
    computed: {
      IMG_URL() {
        return sheep.$store('AI').sq_image_path;
      },
    },
    created() {
      this.getHistoryToday();
    },
    methods: {
      dayjs,
      // 获取历史今天
      async getHistoryToday() {
        let { data } = await sheep.$api.surname.getHistoryToday();
        this.historyToday = data;
      },
      // 跳转详情页
      goDetails(info) {
        sheep.$router.go('/pages/chineseSurname/historyIndex', { id: info.id });
      },
    },
  };
</script>

<template>
  <scroll-view :scroll-y="true" class="wh_750" :style="{
    height: `calc(100vh - ${pageHeight})`
  }">
    <view class="wh_726 flex flex-column align-center">
      <view class="historyToday">
        <view class="historyToday_title mt-50">
          <text class="historyToday_title_text">历史今天</text>
        </view>
        <view class="historyToday_date">
          <text class="historyToday_date_text">{{ dayjs(new Date().getTime()).format('YYYY年MM月DD日') }}</text>
        </view>
        <view class="historyToday_describe">
          <text class="historyToday_describe_text">拾亲和您一起见证历史～</text>
        </view>
        <view class="hW_34"></view>
        <view class="historyToday_contents flex justify-between align-center" v-for="(item, index) in historyToday"
              :key="index" @click.stop="goDetails(item)">
          <view class="historyToday_contents_left">
            <image class="historyToday_contents_left_sign" :src="`${IMG_URL}/chineseSurname/listIcon.png`"></image>
          </view>
          <view class="historyToday_contents_right flex align-center justify-between">
            <view class="historyToday_contents_right_title ss-m-l-20">
              <text class="historyToday_contents_right_title_text">{{ item.year }}</text>
            </view>
            <view class="historyToday_contents_right_content ss-m-l-48">
              {{ item.title }}
            </view>
            <view class="mr_20">
              <text class="iconfont icon-ic_rightarrow fs_26"></text>
            </view>
          </view>
        </view>
        <view class="hW_50"></view>
      </view>
    </view>
  </scroll-view>
</template>

<style scoped lang="scss">
  .historyToday {
    min-height: 100vh;

    .historyToday_title {
      width: 662rpx;

      .historyToday_title_text {
        font-family: PingFang SC, PingFang SC;
        font-weight: 600;
        font-size: 44rpx;
        color: #66584D;
      }
    }

    .historyToday_date {
      width: 662rpx;

      .historyToday_date_text {
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 30rpx;
        color: #66584D;
      }
    }

    .historyToday_describe {
      width: 662rpx;

      .historyToday_describe_text {
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 30rpx;
        color: #66584D;
      }
    }

    .historyToday_contents {
      .historyToday_contents_left {
        height: 180rpx;
        width: 4rpx;
        background: #66584D;
        position: relative;

        .historyToday_contents_left_sign {
          width: 27rpx;
          height: 27rpx;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
        }
      }

      .historyToday_contents_right {
        width: 607rpx;
        height: 150rpx;
        background: #D7C9B5;
        border-radius: 20rpx 20rpx 20rpx 20rpx;

        .historyToday_contents_right_title {
          .historyToday_contents_right_title_text {
            font-family: PingFang SC, PingFang SC;
            font-weight: 600;
            font-size: 38rpx;
            color: #66584D;
          }
        }

        .historyToday_contents_right_content {
          width: 390rpx;
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          font-size: 30rpx;
          color: #66584D;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
    }
  }
</style>